<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--画板的width和height只能通过 属性来描述才有效果,不能通过 样式控制-->
		<canvas id="can" width="450" height="400" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var mycan = document.getElementById("can");
			//得到绘画的环境:
			var ctx=mycan.getContext("2d");
			//绘制起始点和终点的坐标:
			ctx.strokeStyle="blue"; //设置画笔绘制路径的颜色、渐变和模式
			ctx.moveTo(100,100);  //起始点
			ctx.lineTo(300,300);
			ctx.lineTo(200,270);
			ctx.lineTo(100,100);
			ctx.stroke(); //沿着绘制路径的坐标点顺序绘制直线
		</script>
	</body>
</html>
